<template>
  <a-drawer :title="$t('user.verification-code.required111566191')" :width="600" :visible.sync="visible"
    :body-style="{ 'padding-top': '0px', paddingBottom: '80px' }" @close="close">
    <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 17 }" layout="horizontal">
      <a-form-item :label="$t('user.verification-code.required111566195')">
        <a-checkbox-group v-decorator="['rId']">
          <div class="flex flex-wrap">
            <template v-for="item in roleList">
              <span class="py-1">
                <a-checkbox :value="item.YtId">{{ item.YtRoleName }}</a-checkbox>
              </span>
            </template>
          </div>
        </a-checkbox-group>
      </a-form-item>
    </a-form>
    <div
      class="absolute right-0 bottom-0 w-full border-t border-[#e9e9e9] px-4 py-[10px] bg-white text-left z-1 flex justify-center">
      <a-button :style="{ marginRight: '20px' }" class="w-[200px]" @click="close">{{ $t('user.email.required11')
      }}</a-button>
      <a-button :loading="loading" class="w-[200px]" type="primary" @click.native.prevent="submit()">
        <span v-if="!loading">{{ $t('app.setting.weakmode') }}</span>
        <span v-else>{{ $t('user.verification-code.required111566196') }}...</span>
      </a-button>
    </div>
  </a-drawer>
</template>

<script>
import { getAllRoleList, setUserRole } from '@/api/index'
export default {
  data() {
    return {
      form: this.$form.createForm(this),
      roleList: [],
      projectList: [],
      visible: false,
      loading: false,
      userId: 0,
    }
  },
  mounted() { },
  methods: {
    /**
     *
     * @param {*} data 数据
     */
    async open(data = {}) {
      this.init(data.YtId)
      this.visible = true
      await this.$nextTick()
      this.form.setFieldsValue({
        rId: data.YtAdminRoleIds,
      })
      this.userId = data.YtId
    },
    async init() {
      try {
        const { data } = await getAllRoleList()
        this.roleList = [...data]
      } catch (error) {
        this.$message.error(error)
      }
    },
    submit() {
      const {
        form: { validateFields },
      } = this
      const userId = this.userId
      this.loading = true
      validateFields(['rId'], { force: true }, async (err, values) => {
        if (!err) {
          try {
            const rId = values.rId.join(',')
            await setUserRole({ rId, userId })
            this.$emit('succeed')
            this.$message.success(this.$t( 'user.verification-code.required111566110577308'))
            this.close()
          } catch (error) {
            this.$message.error(error)
          } finally {
            this.loading = false
          }
        } else {
          setTimeout(() => {
            this.loading = false
          }, 600)
        }
      })
    },
    close() {
      this.visible = false
      this.form.resetFields()
    },
  },
}
</script>
<style lang="less" scoped>
.shadow {
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
}
</style>